<template>
	<notice :notice.sync="notice"></notice>
	<header-home></header-home>
	<div class="container div-course">
	    <div class="loading" v-if="loading">
			<i class="fa fa-spinner fa-spin fa-3x"></i>
		</div>
	    <div class="row">
	        <div class="col-md-10 col-md-offset-1">
	            <button class="btn btn-default margin-bottom-10" @click="showAddModal">添加课程</button>
	        </div>
	    </div>
	    <div class="row" v-if="!loading">
	    	<div class="col-md-10 col-md-offset-1 display-hint" v-if="pageInfo.np==1&&courses.length==0">
                <p>点击上方创建课程按钮创建一个课程</p>
            </div>
            <div class="col-md-10 col-md-offset-1" v-else>
                <table class="table table-hover ">
                    <tr class="table-header">
                        <!-- <th><input type="checkbox" class="select-all"></th> -->
                        <th>课程名称</th>
                        <th>课程代码</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    <!-- 添加课程时动态显示 -->
                    <tr class="course-row" :value="item.cou_id" v-for="item in courses" transition="fade">
                        <!-- <td><input type="checkbox"></td> -->
                        <td><a :href="'/index.php/TeaClass/classes?cd='+item.cou_id">{{item.cou_name}}</a></td>
                        <td>{{item.cou_code}}</td>
                        <td>
                            {{item.is_available==='1'?'可用':'不可用'}}
                        </td>
                        <td class="edit-course">
                            <span class="span-edit glyphicon glyphicon-option-horizontal" title="编辑"></span>
                            <span class="span-edit glyphicon glyphicon-pencil" title="编辑" @click="showModModal($index)"></span>
                            <span class="span-edit glyphicon glyphicon-remove" title="删除" @click="delTry($index)"></span>
                        </td>
                    </tr>
                </table>
            </div>
	    </div>
	    <div class="row" v-if="!loading">
            <div class="col-md-3 col-md-offset-5">
                <pagenation v-if="pageInfo.page>1"
                			:page-info="pageInfo"
                			@update-np="updatePage">
                </pagenation>
            </div>
	    </div>
	    <modal type="modal-sm" id="del-confirm">
	    	<h4 class="modal-title text-danger" slot="header">删除课程</h4>
	    	<p slot="body">是否删除课程</p>
	    	<button slot="footer" type="button" class="btn btn-danger" @click="delConfirm">删除</button>
	    </modal>
	    <modal id="course-action">
	    	<h4 class="modal-title" slot="header">{{newCourse.actionState?'修改课程':'添加课程'}}</h4>
	    	<div class="row" slot="body" v-if="!newCourse.actionState">
	    	    <form class="form-horizontal">
	    		    <div class="form-group">
	    		        <label class="col-sm-2 control-label">课程名称</label>
	    		        <div class="col-sm-6">
	    		            <input type="text" class="form-control" v-model="newCourse.cou_name" placeholder="请输入课程名" required> 
	    		        </div>
	    		        <span class="glyphicon glyphicon-question-sign hint" v-tool-tip data-toggle="tooltip" data-placement="right" title="同一名老师下的课程名不允许重复"></span>
	    		    </div>
	    		    <div class="form-group">
	    		        <label class="col-sm-2 control-label">课程代码</label>
	    		        <div class="col-sm-6">
	    		            <input type="text" class="form-control" id="edit-course-code" v-model="newCourse.cou_code"
	    		                   pattern="^[A-Za-z0-9]+$" placeholder="请输入课程代号"/>
	    		        </div>
	    		        <span class="glyphicon glyphicon-question-sign hint" v-tool-tip data-toggle="tooltip" data-placement="right" title="课程代号可以填写教务处的代码,如果不清楚,请空缺"></span>
	    		    </div>
	    		    <div class="form-group">
	    		        <div class="col-sm-offset-2 col-sm-3">
	    		            <div class="checkbox">
	    		                <label>
	    		                    <input type="checkbox" v-model="newCourse.is_available"/>是否可用
	    		                </label>
	    		            </div>
	    		        </div>
	    		        <span class="glyphicon glyphicon-question-sign hint" v-tool-tip data-toggle="tooltip" data-placement="right" title="选择立即启用课程后,学生可以通过课程名找到该课程"></span>
	    		    </div>
	    		</form>
	    	    <!-- <div class="col-md-6">
	    	        <p class="text-info">同一名老师下的课程名不允许重复</p></br>
	    	        <p class="text-info">课程代号可以填写教务处的代码,如果不清楚,请空缺</p>
	    	        <p class="text-info">选择立即启用课程后,学生可以通过课程名找到该课程</p>
	    	    </div> -->
	    	</div>
	    	<div class="row" slot="body" v-else>
	    		<form class="form-horizontal">
	    		    <div class="form-group">
	    		        <label class="col-sm-2 control-label">课程名称</label>
	    		        <div class="col-sm-6">
	    		            <p class="form-control-static">{{newCourse.cou_name}}</p>
	    		        </div>
	    		    </div>
	    		    <div class="form-group">
	    		        <label class="col-sm-2 control-label">课程代码</label>
	    		        <div class="col-sm-6">
	    		            <input type="text" class="form-control" id="edit-course-code" v-model="newCourse.cou_code"
	    		                   pattern="^[A-Za-z0-9]+$" placeholder="请输入课程代号"/>
	    		        </div>
	    		    </div>
	    		    <div class="form-group">
	    		        <div class="col-sm-offset-2 col-sm-3">
	    		            <div class="checkbox">
	    		                <label>
	    		                    <input type="checkbox" v-model="newCourse.is_available"/>是否可用
	    		                </label>
	    		            </div>
	    		        </div>
	    		        <span class="glyphicon glyphicon-question-sign hint" v-tool-tip data-toggle="tooltip" data-placement="right" title="停用课程后，学生不能找到该课程"></span>
	    		    </div>
	    		</form>
	    	</div>
	    	<button slot="footer" type="button" class="btn btn-primary" @click="courseAction">确定</button>
	    </modal>
	</div>
</template>

<script>
	import HeaderHome from '../../Component/HeaderHome/HeaderHome';
	import Pagenation from '../../Component/Pagenation/Pagenation';
	import Modal from '../../Component/Modal/Modal';
	import Notice from '../../Component/Notice/Notice';

	export default {
		created: function() {
			this.getCourses(1);
		},
		ready: function() {
			//$('[data-toggle="tooltip"]').tooltip();
		},
		data() {
			return {
				notice: {type: 0, msg: ''},
				loading: false,
				courses: {},
				pageInfo: {},
				delIndex: -1,
				modIndex: -1,
				newCourse: {}
			}
		},
		components: {
			Notice,
			HeaderHome,
			Pagenation,
			Modal
		},
		methods: {
			getCourses: function(np) {
				this.loading = true;
				this.$http.post('/Course/Course', {np: np}).then(function(resp) {
		            if (resp.data.status === 1) {
		                this.courses = resp.data.data.course;
		                this.pageInfo = resp.data.data.pageInfo;
		            } else {
		                this.notice = {type: 0, msg: resp.data.message};
		            }
		            this.loading = false;
			    }, function(resp) {
			        // error callback
			        this.notice = {type: 0, msg: resp.statusText};
			        this.loading = false;
			    })
			},
			updatePage: function(np) {
				if (np == this.pageInfo.np)
					return
				this.getCourses(np);
			},
			delTry: function(index) {
				this.$http.post('/Course/check_delete', {cou_id: this.courses[index].cou_id}).then(function(resp) {
					if (resp.data.status === 1) {
						this.delIndex = index;
						$("#del-confirm").modal("toggle");
					} else {
						this.notice = {type: 0, msg: resp.data.message};
					}
				}, function(resp) {
					this.notice = {type: 0, msg: resp.statusText};
				})
			},
			delConfirm: function() {
				this.$http.post('/Course/delete', {cou_id: this.courses[this.delIndex].cou_id}).then(function(resp) {
					if (resp.data.status === 1) {
						this.courses.splice(this.delIndex, 1);
						this.notice = {type: 1, msg: resp.data.message};
					} else {
						this.notice = {type: 0, msg: resp.data.message};
					}
				}, function(resp) {
					this.notice = {type: 0, msg: resp.statusText};
				})
				$("#del-confirm").modal("toggle");
			},
			showAddModal: function() {
				this.newCourse = {};
				this.$set('newCourse.actionState', 0); // 0->添加,1->修改
				/*setTimeout(function() {
					$('[data-toggle="tooltip"]').tooltip();
				}, 1000);*/
				$("#course-action").modal("toggle");
			},
			showModModal: function(index) {
				this.modIndex = index;
				this.newCourse = Object.assign({}, this.courses[index]); // 克隆对象
				this.newCourse.is_available = this.newCourse.is_available==='1'?true:false;
				this.$set('newCourse.actionState', 1); // 0->添加,1->修改
				/*setTimeout(function() {
					$('[data-toggle="tooltip"]').tooltip();
				}, 1000);*/
				$("#course-action").modal("toggle");
			},
			courseAction: function() {
				var postData = {
					cou_name: this.newCourse.cou_name,
					cou_code: this.newCourse.cou_code,
					is_available: this.newCourse.is_available?'1':'0',
					cou_id: this.newCourse.cou_id
				},
					postUrl = this.newCourse.actionState ? 'update' : 'add';
				this.$http.post('/Course/'+postUrl, postData).then(function(resp) {
					if (resp.data.status === 1) {
						if (!this.newCourse.actionState) {
							postData.cou_id = resp.data.data.id;
							this.courses.splice(0, 0, postData)
						}
						else {
							this.courses.$set(this.modIndex, postData);
						} 
						$("#course-action").modal("toggle");
						this.notice = {type: 1, msg: resp.data.message};
					} else {
						this.notice = {type: 0, msg: resp.data.message};
					}
				}, function(resp) {
					this.notice = {type: 1, msg: resp.statusText};
				})
			}
		}
	}
</script>

<style>
.div-course {
	padding: 50px 0px 80px 0px;
}

.table .table-header {
	background-color: #f5f5f5;
	height: 60px;
}

.table{
	background-color: #fff;
	border: 1px solid #ddd;
}

.table tr, .table th{
    height: 50px;
    text-align: center;
}

.table > tbody > tr > th, 
.table > tbody > tr > td {
	vertical-align: middle;
	width: 50px;
	text-overflow: ellipsis;
}

.edit-course span{
	cursor: pointer;
}

.edit-course span[class$=pencil], 
.edit-course span[class$=remove] {
	display: none
}

.table tr:hover .edit-course span[class$=horizontal] {
	display: none;
}

.table tr:hover .edit-course span[class$=pencil] {
	display: inline-block;
}

.table tr:hover .edit-course span[class$=remove] {
	display: inline-block;
}

.fade-transition {
	transition: all .8s ease;
	opacity: 1;
}
.fade-enter, .fade-leave {
	opacity: 0;
}
.hint {
	cursor: pointer;
	line-height: 32px;
}
</style>